<template>
	<div class="menu-wrapper">
		<Menu
		  ref="menu"
		  active-name="1"
		  class="node-menu"
		  theme="dark"
		  width="auto"
		  :accordion="true"
		  :open-names="openFold"
		  :active-name="activeIndex"
		  @on-select="navTo"
		>
			<div class="layout-logo-left text-right">
				<div class="app-box">
					<Icon type="android-apps"></Icon>{{app}}</div>
				<Button
				  @click="$store.dispatch('fetchNodes')"
				  type="text"
				  icon="refresh"
				></Button>
			</div>
			<div class="menu-list">
				<Scrollbar
				  ref="scroller"
				  :vertical="true"
				>
					<template v-for="(node,index) in data">
						<Submenu
						  ref="subMenu"
						  v-if="node.children && node.children.length"
						  :name="node.code"
						  :key="index"
						>
							<template slot="title">
								<Icon :type="nodeIcon(node)"></Icon>
								<span
								  class="menu-text"
								  @click="updateScroll"
								  ref="nodeName"
								>{{node.name}}</span>
							</template>
							<position
							  bottom
							  v-if="index === activePosition"
							>
								<div
								  class="menu-title"
								  v-show="spread"
								>{{node.name}}</div>
			<Menu-item
			  v-for="child in sortChild(node.children)"
			  :class="{'menu-item-selected': activeIndex === child.code}"
			  :name="child.code"
			  :key="child.code"
			  @click.native="hiddenItem"
			>
				<Icon :type="nodeIcon(child,true)"></Icon>
				{{child.name}}
				</Menu-item>
				</position>
				<div v-if="!spread">
					<Menu-item
					  v-for="child in sortChild(node.children)"
					  :class="{'menu-item-selected': activeIndex === child.code}"
					  :name="child.code"
					  :key="child.code"
					>
						<Icon :type="nodeIcon(child,true)"></Icon>
						{{child.name}}
						</Menu-item>
				</div>
				</Submenu>
				<Menu-item
				  v-else
				  :name="node.code"
				  :key="index"
				>
					<Icon
					  :type="nodeIcon(node)"
					  :size="iconSize"
					></Icon>
						<span class="layout-text">
							{{node.name}}
						</span>
						</Menu-item>
						</template>
						</Scrollbar>
	</div>
	<div class="menu-footer">
		@ {{footer}}
	</div>
	</Menu>
	<Spin
	  class="menu-spin"
	  size="large"
	  fix
	  v-if="!isLoad"
	></Spin>
		</div>
</template>
<script>
import nodeIcons from './icon';
import $ from '@/common';
import { on, off } from '@/common/dom';
import position from '@/element/position';
export default {
	name: 'nodeMenu',
	components: { position },
	props: {
		data: {},
		spread: {
			default: false,
		},
		footer: {},
		menuHeight: null,
	},
	data() {
		return {
			isLoad: true,
			app: window.App,
			activePosition: '',
		};
	},
	created() {},
	computed: {
		iconSize() {
			return 14;
		},
		activeIndex() {
			var code = this.$route.params.node;
			if ($.nodeList[code]) {
				return $.nodeList[code].code;
			} else {
				return null;
			}
		},
		openFold() {
			var code = this.$route.params.node;
			if (!code || !$.nodeList[code] || this.spread) {
				return [];
			}
			var parentNode = $.nodeList[$.nodeList[code].parent_code];
			if ($.nodeList[code] && parentNode) {
				this.updateScroll();
				return [parentNode.code];
			} else {
				return [];
			}
		},
	},
	watch: {
		spread: function() {
			if (!this.spread) this.hiddenItem();
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.scroller.resize();
				}, 300);
			});
		},
	},
	methods: {
		navTo(index) {
			if (index) {
				//界面展开状态下，进入新节点将会隐藏菜单
				if (this.spread) {
					this.closeFolder();
				}
				this.$router.push(`/page/${$.getNodeCode(index)}`);
			}
		},
		sortChild(data) {
			var res = $.copy(data).sort((a, b) => a.serial - b.serial);
			return res;
		},
		nodeIcon(node, child) {
			return nodeIcons[$.getNodeCode(node.code)] || (child ? null : 'navicon-round');
		},
		closeFolder() {
			if (this.$refs.subMenu) {
				this.$refs.subMenu.forEach(item => {
					item.opened = false;
				});
			}
		},
		updateScroll(i, e) {
			setTimeout(() => {
				this.$refs.scroller.resize();
			}, 300);
			if (this.spread) {
				this.activePosition = i;
			}
		},
		hiddenItem() {
			this.activePosition = 100;
		},
	},
	updated() {
		this.$refs.nodeName.forEach((v, i) => {
			on(v.parentNode, 'click', this.updateScroll, [i]);
		});
		if (this.$refs.menu && this.$refs.menu.$el.offsetHeight !== this.menuHeight) {
			//this.menuHeight = this.$refs.menu.$el.offsetHeight;
			this.$refs.scroller.resize();
		}
	},
	mounted() {
		this.$refs.nodeName.forEach((v, i) => {
			on(v.parentNode, 'click', this.updateScroll, [i]);
		});
	},
	destroyed() {
		this.$refs.nodeName.forEach(v => {
			off(v.parentNode, 'click', this.updateScroll);
		});
	},
};
</script>
<style lang="less">
.layout .layout-menu {
	display: flex;
	flex-direction: column;
}

.menu-wrapper {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	.scrollbar_bar {
		z-index: 1001;
	}
	.scrollbar_bar.is-vertical {
		right: 2px;
		top: 0;
	}
	.scrollbar_thumb {
		background-color: rgba(144, 146, 152, 0.6);
		transform: height 0.3s;
	}
}

.node-menu.ivu-menu {
	flex: 1;
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	.menu-list {
		flex: 1;
		overflow: hidden;
	}
	.menu-footer {
		color: #c0c8cd;
		font-size: 12px;
		text-align: center;
		background: #495060;
		padding: 4px 0;
	}
}

.menu-spin {
	background: transparent;
}

.ivu-menu-submenu.ivu-menu-item-active {
	border-left: 2px solid #2d8cf0;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item.menu-item-selected,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item.menu-item-selected:hover {
	color: #fff;
	background-color: #2d8cf0 !important;
}
.node-menu.ivu-menu-vertical {
	.ivu-menu-item,
	.ivu-menu-submenu-title {
		padding: 12px 24px;
		padding-right: 12px;
	}
}

.app-box {
	float: left;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 14px;
	padding-left: 12px;
	.ivu-icon {
		font-size: 18px;
		position: relative;
		top: 1px;
		margin-right: 8px;
	}
}

.node-menu {
	.ivu-menu-submenu-title {
		.ivu-icon:first-child {
			font-size: 16px;
			width: 12px;
			top: 2px;
			position: relative;
			text-align: center;
			line-height: 1;
		}
	}
}

.layout-spread {
	.node-menu.ivu-menu {
		width: 60px !important;
		.ivu-menu-opened .ivu-menu {
			display: none;
		}
		.ivu-menu-opened {
			.ivu-menu-submenu-title {
				background: #363e4f;
				z-index: 2;
			}
		}
	}
	.ivu-menu-submenu {
		background: #495060;
		.menu-title {
			padding: 15px 4px;
			color: #ffffff;
			font-size: 13px;
		}
		position: relative;
		.ivu-menu {
			position: relative;
			z-index: 100;
			background: #363e4f;
			min-width: 160px;
			width: auto;
			text-align: left;
			top: -45px;
			left: 57px;
			margin-bottom: -45px;
			.ivu-menu-item {
				padding: 12px 8px;
				font-size: 13px;
				&.ivu-menu-item-active {
					background: transparent !important;
					color: #3698ff;
					font-weight: bold;
				}
			}
		}
	}
	.ivu-menu-submenu-title-icon {
		display: none;
	}
}

.layout-logo-left {
	.ivu-btn {
		color: #fff;
	}
}
</style>
